import { Component, useState } from "react";

class Fahrenheit extends Component {
  render() {
    const {value,onchange}=this.props
   let change=(e)=>{
    let temper=(Number(e.target.value)-32)*5/9
    onchange(Number(temper))
   }
    return (
      <div>
        <label>华氏温度</label>
        <input type="text" value={value*9/5+32} onChange={change}/>
      </div>
    )
  }
}

function Celsius(props) {
  let { value, onChange } = props;
  let change = (e) => {
    console.log(e.target.value);
    onChange(e.target.value)

  }
  return (
    <div>
      <label htmlFor="">摄氏温度</label>
      <input type="text" value={value} onChange={change} />
    </div>
  )

}

function DemoA() {
  const [temper, setTemper] = useState(0)//temper就是被我们提升的状态
  return (
    <div>
      <Fahrenheit value={temper} onchange={val=>setTemper(val)}></Fahrenheit>
      <hr />
      <Celsius value={temper} onChange={val=>setTemper(val)}></Celsius>
    </div>
  )
}

export default DemoA